<template>
	<view>
		<view class="conTex dis dis2 dis3" v-if="isHeard !=0">
			<view class="conTex_s dis  dis2">
				<image :src="item.img" mode="aspectFit" class="zangf"></image>
				<text class="zangClass_1">{{item.weidu}}</text>
				<text class="zangClass_2">（{{item.zhibiao}}）</text>
			</view>
			<view class="btons contenr">
				<view class="btn contenr" @click="retest(item.weiduid)">
					<text>去复测</text>
					<image src="../static/image/ico_5_1.png" mode="aspectFit" class="images"></image>
				</view>
			</view>
		</view>
		<!-- 脏腑 indexData.weidu  && item.isempty !=1 && item.score<100-->
		<block v-if="item.score<100">
			<view class="jindu dis  dis5" v-if="item.weidu=='脏腑'" :class="{jinduMar:isHeard==0}">
				<view class="items dis dis3">
					<block v-for="(i,index) in visceraTarget" :key="index">
						<view class="item dis dis5 dis1 dis2" :class="{selectItem:index==isShowImgs(item.guanzhudupos)}">
							<image :src="i.image" mode="aspectFit" class="itemImg" v-if="index !=isShowImgs(item.guanzhudupos)"></image>
							<image :src="i.image1" mode="aspectFit" class="itemImg" v-else></image>
							<text>{{i.text}}</text>
						</view>
					</block>
				</view>
			</view>
			<!-- 上火 -->
			<view class="angry contenr" v-if="item.weidu =='上火'" :class="{jinduMar:isHeard==0}">
				<block v-for="(items,indexp) in angryList" :key="indexp">
					<view class="angryImgItem contenr">
						<image src=" /static/img/icon2.png" mode="aspectFit" class="angryImg"></image>
						<image src=" /static/img/icon1.png" mode="aspectFit" class="angryImg" v-if="indexp<=item.num-1 && item.score<100"></image>
					</view>
				</block>
			</view>
			<!-- 阴阳寒热 -->
			<view class="cold dis dis5 dis1" v-if="item.weidu =='阴阳' || item.weidu =='寒热' || item.weidu =='寒/热'"   :class="{jinduMar:isHeard==0}">
				<view class="top dis  dis2">
					<view class="left_1 contenr" :class="{left_1Bg: item.weidu =='阴阳'}">
						<text v-if="item.weidu =='寒热'">寒</text>
						<text v-if="item.weidu =='阴阳'">阴</text>
					</view>
					<view class="cons dis dis2">
						<view class="hot" :class="{hots:item.weidu =='阴阳'}"></view>
						<view class="cold_1" :class="{cold_1s:item.weidu =='阴阳'}"></view>
						<view class="qius" :class="[item.weidu =='阴阳'?(item.key=='偏阳'?'qius_3':'qius_1'):(item.key=='偏热'?'qius_2':'')]"
						 :style="{left:setWidth(item.key,item.score)}"></view>
					</view>
					<view class="left_1 rig contenr" :class="{left_1Bg1:item.weidu =='阴阳'}">
						<text v-if="item.weidu =='寒热'">热</text>
						<text v-if="item.weidu =='阴阳'">阳</text>
					</view>
				</view>
				<view class="btoText">
					<text class="bottexts" v-if="item.weidu =='寒热'">偏寒</text>
					<text class="bottexts" v-if="item.weidu =='阴阳'">偏阴</text>
					<text class="bottexts bottexts1">平衡</text>
					<text class="bottexts" v-if="item.weidu =='寒热'">偏热</text>
					<text class="bottexts" v-if="item.weidu =='阴阳'">偏阳</text>
				</view>
			</view>
			<!-- 湿气 || 气血 -->
			<view class="energy dis dis1 dis2" v-if="item.weidu =='湿气' || item.weidu =='气血'" :class="{jinduMar:isHeard==0}">
				<image src="/static/img/jindu.png" mode="aspectFit" class="jinduImg" v-if="item.weidu =='湿气'"></image>
				<image src="/static/img/qixuehong.png" mode="aspectFit" class="jinduImg" v-if="item.weidu =='气血'"></image>
				<image src="/static/img/jiaobiao.png" mode="aspectFit" class="jiaobiao" :style="{left:setLeft(item.guanzhudupos)}"></image>
			</view>
		</block>
		<block v-if="item.score==100 && item.isempty !=1">
			<view class="icons contenr">
				<image :src="icons" mode="aspectFit" class="images"></image>
			</view>
		</block>

	</view>
</template>
<script>
	let app = getApp().globalData;
	import index from '@/common/js/city.js';
	import config from '@/common/js/config.js';
	export default {
		props: {
			item: {

			},
			isHeard: {

			}
		},
		data() {
			return {
				visceraTarget: index.visceraTarget,
				angryList: [{}, {}, {}, {}, {}],
				icons: `${config.imgUrl}icon12.png`
			}
		},
		methods: {
			// 脏腑图片展示
			isShowImgs(guanzhudupos){
				let is =0;
				if(guanzhudupos==0 ){
					is=0
				}else{
						is = guanzhudupos-1;
				}
				return is;
			},
			setWidth(name, nums) {
				let inde = 100;
				let numsp = 0;
				if (name == '偏阴' || name == '偏寒') {
					numsp = (nums / 2) - 5;
				} else if (name == '偏阳' || name == '偏热') {
					numsp = 50 + inde - nums;
				} else {
					numsp = 50 - 5;
				}
				return `${numsp}%`
			},
			yingWidth(name, nums) {
				let inde = 100;
				let numsp = 0;
				if (name == '偏阴' || name == '偏寒') {
					numsp = (nums / 2) - 2;
				} else if (name == '偏阳' || name == '偏热') {
					numsp = 50 + inde - nums;
				} else {
					numsp = 50 - 2;
				}
				if (nums == 100) {
					numsp = 50 - 2;
				}
				return `${numsp}%`
			},
			setLeft(data) {
				let width = 0;
				switch (data) {
					case 1:
						width = 12
						break;
					case 2:
						width = 22
						break;
					case 3:
						width = 30
						break;
					case 4:
						width = 40
						break;
					case 5:
						width = 49
						break;
					case 6:
						width = 59
						break;
					case 7:
						width = 68
						break;
					case 8:
						width = 78
						break;
					case 9:
						width = 86
						break;
					case 0:
						width = 12
						break;
					default:
						width = 12
						break;
				}
				return `${width}%`
			},
			retest(weidu){
				// console.log(weidu )
				this.$emit('retest',weidu)
			}
		},
		created() {

		}
	}
</script>
<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";

	.conTex {
		width: 100%;
		height: 110upx;
		.btons{
			width: 30%;
			height: 100%;
			.btn{
				width: 160upx;
				height: 50%;
				background-color: #EBEDF0;
				color: #333;
				border-radius: 16upx;
			}
			.images{
				width: 40upx;
				height: 40upx;
			}
		}
		.conTex_s{
			width: 50%;
			height: 100%;
		.zangf {
			width: 44upx;
			height: 44upx;
			margin-left: 32upx;
		}

		.zangClass_1 {
			font-size: 32upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
			margin-left: 10upx;
		}

		.zangClass_2 {
			font-size: 32upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #6E9DFF;
		}
		}
	}
	

	.jindu {
		width: 640upx;
		height: 124upx;
		// border: 1px solid red;
		// background: #F5F5F5;
		border-radius: 14upx;
		margin: auto;
		margin-top: 10upx;
		.items {
			width: 100%;
			height: 100%;
			background: #F8F8F8;
			// border: 1px solid red;
			font-size: 24upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #C1C1C1;
			border-radius: 16upx;

			.item {
				width: 20%;
				height: 100%;

				.itemImg {
					width: 66upx;
					height: 66upx;
					margin-bottom: 9upx;
				}
			}

			.selectItem {
				background: #FFFFFF;
				// box-shadow: 0px 0px 24upx 0px rgba(0, 0, 0, 0.1);
				border: 1upx solid #E8E8E8;
				border-radius: 16upx;
				color: #333333;
				font-family: $typeface;
			}
		}
	}


	.angry {
		width: 606upx;
		height: 99upx;
		background: #FBFAFA;
		border-radius: 16upx;
		margin: auto;
		margin-top: 10upx;

		// margin-top: 20upx;
		.angryImgItem {
			width: 20%;
			height: 100%;
			position: relative;

			.angryImg {
				width: 35upx;
				height: 42upx;
				position: absolute;
			}
		}
	}

	.cold {
		width: 644upx;
		// width:606upx;
		height: 99upx;
		background: #F5F5F5;
		border-radius: 16upx;
		margin: auto;
		position: relative;
		margin-top: 10upx;

		.top {
			width: 623upx;
			height: 50%;
			margin: auto;
			margin-top: 16rpx;

			.left_1 {
				width: 50upx;
				height: 50upx;
				color: #fff;
				background-color: #3f9fff;
				border-radius: 50%;
				font-size: 24upx;
				font-weight: 500;
				font-family: $typeface;
			}

			.rig {
				background-color: #ff7654;
				border-radius: 50%;
				margin-left: 10upx;
			}

			.left_1Bg {
				background-color: #404243;
			}

			.left_1Bg1 {
				background-color: #fff;
				color: #333;
				border: 4upx solid #FFFFFF;
			}

			.cons {
				width: 513upx;
				height: 10upx;
				position: relative;

				.hot {
					width: 513upx;
					height: 100%;
					background: #FF7654;
					border: 4upx solid #FFFFFF;
					position: absolute;
				}

				.cold_1 {
					background: #3F9FFF;
					height: 100%;
					width: 50%;
					border: 4upx solid #FFFFFF;
					position: absolute;
				}

				.qius {
					position: absolute;
					width: 22upx;
					height: 22upx;
					background: #3F9FFF;
					box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.12);
					border: 4upx solid #FFFFFF;
					border-radius: 50%;
					// top: 0;
				}

				.qius_1 {
					background-color: #404243;
				}

				.qius_2 {
					background-color: #FF7654;
				}

				.qius_3 {
					background-color: #D8D8D8;
				}

				.hots {
					background: #FFFFFF;
				}

				.cold_1s {
					background-color: #404243;
				}

				.qius_1 {
					background-color: #404243;
				}
			}
		}

		.btoText {
			width: 349upx;
			position: absolute;
			left: 142upx;
			top: 48upx;
			top: 55rpx;
			height: 33rpx;

			.bottexts {
				width: 48upx;
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				line-height: 33upx;
			}

			.bottexts1 {
				margin-left: 105upx;
				margin-right: 98upx;
			}
		}

	}

	.energy {
		width: 100%;
		height: 100upx;
		margin: auto;
		margin-top: 20upx;
		margin-bottom: 32upx;
		position: relative;

		.jinduImg {
			width: 576upx;
			height: 64upx;
		}

		.jiaobiao {
			width: 14upx;
			height: 21upx;
			position: absolute;
			top: -5upx;
		}
	}

	.textbox {
		width: 605upx;
		min-height: 65upx;
		margin: auto;
		margin-top: 30upx;
		font-size: 28upx;
		font-weight: 400;
		padding-bottom: 32upx;

		.text1 {
			color: #666666;
			font-family: $typeface1;
		}

		.text2 {
			color: #6E9DFF;
			font-weight: 500;
			font-family: $typeface;
		}
	}

	.icons {
		width: 100%;
		height: 176upx;

		.images {
			width: 461upx;
			height: 176upx;
		}
	}

	.jinduMar {
		margin-top: 28upx;
		margin-bottom: 40upx;
	}
</style>
